<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>健康报备</el-breadcrumb-item>
      <el-breadcrumb-item>全国疫情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="yq-top" style="margin-bottom: 10px">
      <el-row :gutter="10">
        <el-col :span="12">
          <!-- 表格部分  Tabs 标签页  -->
          <el-tabs type="border-card" class="yq-left">
            <el-tab-pane label="疫情概览" class="left" style="height: 450px">
              <el-table :data="datainfo" border style="width: 100%">
                <el-table-column width="150" prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="value" label="数量">
                  <template slot-scope="scope">
                    <el-tag effect="plain" size=":mini"
                      >{{ scope.row.value }}人</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="yesterday" label="较昨日">
                  <template slot-scope="scope">
                    <el-tag
                      effect="plain"
                      size="mini"
                      v-if="scope.row.yesterday > 0"
                      type="danger"
                      >{{ scope.row.yesterday }} 人</el-tag
                    >
                    <el-tag effect="plain" size="mini" v-else type="success"
                      >{{ scope.row.yesterday }}人</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="cachetime" label="时间" width="180">
                  <span style="font-size: 11px">{{ times }}</span>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!---------- TOP10城市 ------------>
            <el-tab-pane label="TOP10城市">
              <el-table
                :data="top10"
                border
                height="450"
                style="width: 100%; font-size: 10px"
              >
                <el-table-column prop="name" label="城市名称" width="180">
                </el-table-column>
                <el-table-column prop="ename" label="English" width="180">
                </el-table-column>
                <el-table-column prop="jwsrNun" label="确诊人数">
                  <template slot-scope="scope">
                    <el-tag
                      type="danger"
                      effect="plain"
                      size="mini"
                      v-text="scope.row.jwsrNum + '人'"
                    ></el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="10">
          <div class="yq-map">
            <div
              ref="mapBox"
              style="
                background-color: #fff;
                width: 622px;
                height: 400px;
                padding: 60px 0;
              "
            ></div>
            <!-- 初始化echarts需要有个宽高的盒子 -->
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 下边的表格 -->
    <el-card class="box-card">
      <!-- 
        stripe 可以创建带斑马纹的表格
        sortable 可实现以该列为基准的排序 
      -->
      <el-table stripe :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.city" style="width: 100%">
              <el-table-column
                prop="name"
                label="城市/区"
                width="200"
              ></el-table-column>

              <el-table-column
                sortable
                label="现存确诊"
                prop="econNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="累计确诊"
                prop="cureNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="疑似"
                prop="susNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="死亡"
                prop="deathNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="现存无症状"
                prop="asymptomNum"
              ></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column sortable label="省份" prop="name"></el-table-column>
        <el-table-column
          sortable
          label="现存确诊"
          prop="econNum"
        ></el-table-column>
        <el-table-column
          sortable
          label="累计确诊"
          prop="value"
        ></el-table-column>
        <el-table-column sortable label="疑似" prop="susNum"></el-table-column>
        <el-table-column
          sortable
          label="死亡"
          prop="deathNum"
        ></el-table-column>
        <el-table-column
          sortable
          label="现存无症状"
          prop="asymptomNum"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
import jsonp from "jsonp";
const option = {
  title: {
    // 标题内容
    text: "全国疫情图",
    link: "https://baidu.com",
    subtext: "疫情地图",
    sublink: "https://baidu.com",
  },
  series: [
    {
      name: "确诊人数",
      type: "map",
      // 告诉echarts渲染一个地图
      map: "china",
      // 告诉echarts渲染中国地图
      label: {
        // 设置地区汉字
        show: true,
        color: "#333",
        fontSize: 10,
      },
      itemStyle: {
        // 地图区域样式
        areaColor: "#eee",
        borderColor: "yellow", //地图边框颜色
      },
      roam: true, // 鼠标滚轮效果缩放
      zoom: 1.2, // 地图放大缩小
      data: [], // 展示后台给的数据，必须格式（name:xxx;value:xxx）
      // 高亮的展示
      emphasis: {
        // 鼠标经过地图和字体样式
        label: {
          color: "#fff",
          fontSize: 12,
        },
        // 高亮状态地图周边区域的颜色
        itemStyle: {
          areaColor: "#83b5e7", //滑动到哪哪个区域就显示蓝色
        },
      },
    },
  ],

  tooltip: {
    // 鼠标放上去显示内容
    trigger: "item",
  },
  //------visualMap:视觉映射，每个颜色代表什么含义 地图左边数据分布------
  visualMap: [
    {
      // 区域显示颜色
      type: "piecewise",
      show: true,
      // splitNumber: 4
      // 阶段划分
      pieces: [
        { min: 10000 }, //不指定 max，表示 max 为无限大Infinity
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
        // { max: 0 },
      ],
      //定义数据分布的形式
      inRange: {
        // 区域图标样式 类型是一个矩形
        symbol: "rect",
        color: ["#FFC0B1", "#FFAA85", "#FF7B69", "#ED3444", "#E70520"], //浅红到深红
      },
      /* itemWidth: 20,
      itemHeight: 10, */
    },
  ],
  // 鼠标在地图上滑动时，提示的信息是否显示

  /* toolbox: {
    // 下载
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readyOnly: false },
      restore: {},
      saveAsImage: {},
    },
  }, */
};

export default {
  name: "ChinaMap",
  data() {
    return {
      times: "", //更新时间
      datainfo: [], //全部的数据
      loading: true, //加载效果
      tableData: [],
      top10: [], //前十城市
    };
  },
  mounted() {
    this.getData();
    this.mycharts = echarts.init(this.$refs.mapBox);
    // 初始化echarts
    this.mycharts.setOption(option);
  },
  methods: {
    getData() {
      jsonp(
        "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
        {},
        (err, data) => {
          if (!err) {
            console.log(data);
            let list = data.data.list.map((item) => ({
              name: item.name,
              value: item.value,
            }));
            option.series[0].data = list;
            this.mycharts.setOption(option);
            // echarts初始化的前提是dom渲染完成

            this.tableData = data.data.list;
            this.buildTable(data); //构建表格数据
          }
        }
      );
    },
    //构建表格数据:每日新增
    buildTable(data) {
      var data = data.data;
      let data1 = {
        name: "现存确诊",
        value: data.econNum,
        yesterday: data.add_daily["addecon_new"],
      };
      let data2 = {
        name: "累计境外输入",
        value: data.jwsrNum,
        yesterday: data.add_daily["addjwsr"],
      };
      let data3 = {
        name: "现无症状",
        value: data.asymptomNum,
        yesterday: data.add_daily["addasymptom"],
      };
      let data4 = {
        name: "现存确诊重症",
        value: data.heconNum,
        yesterday: data.add_daily["addhecon_new"],
      };
      let data5 = {
        name: "累计确诊",
        value: data.gntotal,
        yesterday: data.add_daily["addcon_new"],
      };
      let data6 = {
        name: "累计死亡",
        value: data.deathtotal,
        yesterday: data.add_daily["adddeath_new"],
      };
      let data7 = {
        name: "累计治愈",
        value: data.curetotal,
        yesterday: data.add_daily["addcure_new"],
      };
      let data8 = {
        name: "现存疑似",
        value: data.sustotal,
        yesterday: data.add_daily["wjw_addsus_new"],
      };
      this.times = data.times;
      this.top10 = data.jwsrTop;

      this.datainfo.push(data1);
      this.datainfo.push(data2);
      this.datainfo.push(data3);
      this.datainfo.push(data4);
      this.datainfo.push(data5);
      this.datainfo.push(data6);
      this.datainfo.push(data7);
      this.datainfo.push(data8);
      this.loading = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  background-color: #fff;
  background: #db2929;
}
</style>